<template>
	<view class="content">
		<view class="nav">
			<image src="http://q79q98ocd.bkt.clouddn.com/back.png" @click="toPro()"></image>
			<text class="title">
				<text class="green" @click="goorder()">采购订单</text>
				<text class="greens">供应订单</text>
			</text>
		</view>
		<view class="aptitude">
			<xyzTab :tabList="tabList" :tabActiveIdx="tabActiveIdx" @tabSelect="tabSelect" :size="'32upx'"></xyzTab>	
		</view>
		<view class="all">
			<view class="orderList" v-for="(item,index) in ordersLists">
				<view class="headline">
					<image :src="item.img" class="store"></image>
					{{item.title}}
					<image :src="item.img2" class="order-more"></image>
					<text>{{item.txt}}</text>
				</view>
				<view class="listTwo">
					<image src="../../../static/img/order-apple.png" class="order-apple"></image>
					<view class="sell">{{item.sell}}</view>
					<view class="unit">
						 <xfl-select :list="list" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="true"  :style_Container="'height: 24px; font-size: 14px;'" :placeholder = "'placeholder'" :initValue="'90斤'"  :selectHideType="'hideAll'" > </xfl-select>
					</view>
					<view class="price">{{item.price}}<text>{{item.sum}}</text></view>
					<view class="refund" :style="item.txt=='待退款'?'':'display:none'">{{item.refund}}</view>
					<view class="flo">
						<view class="total">{{item.total}}<text>{{item.price2}}</text></view>
						<view class="totals"><text class="delete"  :style="item.tabListId=='2'||item.tabListId=='1'?'display:none':''">{{item.delete}}</text><text class="look" :style="item.tabListId=='2'||item.tabListId=='1'?'margin-left:190upx':''">{{item.look}}</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var _thas;
import xyzTab from '@/components/xyz-tab/xyz-tab.vue'
import xflSelect from '@/components/xfl-select/xfl-select.vue';
export default {
	components:{
		xyzTab,
		xflSelect
	},
	data() {
		return {
			tabList: [
				{id: 0,label: '全部'},
				{id: 1,label: '待修改'},
				{id: 2,label: '待发货'},
				{id: 3,label: '待收货'},
				{id: 4,label: '退款/售后'},
			],
			tabActiveIdx: 0,
			list: [     //要展示的数据
				'90斤',
				'60斤',
				'70斤',
				'80斤',
			],
			ordersList:[
				{tabListId:0,img: '/static/img/store.png',title: '芒果有限公司',img2: '/static/img/order-more.png',txt: '交易成功',img3: '/static/img/order-apple.png',sell: '海南朝甜特大芒果皮薄肉厚核小五斤起卖',price: '￥9.80',sum: '×1',total: '共一件商品，合计：',price2: '￥75.6',delete: '删除订单',look: '查看物流'},
				{tabListId:1,img: '/static/img/store.png',title: '芒果有限公司',img2: '/static/img/order-more.png',txt: '待支付',img3: '/static/img/order-apple.png',sell: '海南朝甜特大芒果皮薄肉厚核小五斤起卖',price: '￥9.80',sum: '×1',total: '共一件商品，合计：',price2: '￥75.6',delete: '修改订单',look: '修改订单'},
				{tabListId:2,img: '/static/img/store.png',title: '芒果有限公司',img2: '/static/img/order-more.png',txt: '待发货',img3: '/static/img/order-apple.png',sell: '海南朝甜特大芒果皮薄肉厚核小五斤起卖',price: '￥9.80',sum: '×1',total: '共一件商品，合计：',price2: '￥75.6',delete: '删除订单',look: '立即发货'},
				{tabListId:3,img: '/static/img/store.png',title: '芒果有限公司',img2: '/static/img/order-more.png',txt: '待收货',img3: '/static/img/order-apple.png',sell: '海南朝甜特大芒果皮薄肉厚核小五斤起卖',price: '￥9.80',sum: '×1',total: '共一件商品，合计：',price2: '￥75.6',delete: '查看物流',look: '确认收货'},
				{tabListId:4,img: '/static/img/store.png',title: '芒果有限公司',img2: '/static/img/order-more.png',txt: '待退款',img3: '/static/img/order-apple.png',sell: '海南朝甜特大芒果皮薄肉厚核小五斤起卖',price: '￥9.80',sum: '×1',total: '共一件商品，合计：',price2: '￥75.6',delete: '删除订单',look: '立即退款',refund: '退款原因：其他'},
				{tabListId:4,img: '/static/img/store.png',title: '芒果有限公司',img2: '/static/img/order-more.png',txt: '待退款',img3: '/static/img/order-apple.png',sell: '海南朝甜特大芒果皮薄肉厚核小五斤起卖',price: '￥9.80',sum: '×1',total: '共一件商品，合计：',price2: '￥75.6',delete: '删除订单',look: '立即退款',refund: '退款原因：其他'},
				
			],
			tabListId:0,
			ordersLists:[]
		};
	},
	onLoad:function(){
		_thas=this;
		this.tabSelect();
	},
	methods:{
		tabSelect(e){			
			if(e==null){
				e=0;
			}
			console.log(e);
			_thas.tabListId=e;
			_thas.ordersLists=[];
			var len=_thas.ordersList.length;
			for (var i=0;i<len;i++) {
				if(_thas.ordersList[i].tabListId==e){
					_thas.ordersLists.push(_thas.ordersList[i]);
					
				}
			}	
		},
		toPro(){
			uni.reLaunch({
				url: '../products'
			});
		},
		goorder(){
			uni.reLaunch({
				url: 'orderguanli'
			});
		},
	}
}
</script>

<style lang="scss">
.content{
	color: #333;
	.nav{
		padding: 70upx 0 10upx 0;
		text-align: center;
		position: relative;
		border-bottom: #F00;
		width: 100%;
		image{
			width: 35upx;
			height: 35upx;
			vertical-align: middle;
			position: absolute;
			left: 30upx;
			bottom: 16.5upx;
		}	
		.title{
			border-radius:30upx;
			font-size:32upx;
			font-weight:400;		
			.green{
				background-color: #fff;
				color: #55C47D;
				border:2upx solid #55C47D;
				border-radius:30upx 0 0 30upx;
				padding: 9upx 15upx;		
			}
			.greens{
				background-color: #55C47D;
				color: #fff;
				border:2upx solid #55C47D;			
				border-radius:0upx 30upx 30upx 0upx;
				padding: 9upx 15upx;		
			}
		}
	}
	.all{
		background-color: #F7F4F8;
		padding: 30upx;
		height: 1200upx;
		.orderList{
			background-color: #fff;
			padding: 0 24upx;
			border-radius: 10upx;
			margin-bottom: 24upx;
			.headline{
				padding: 17upx 0;
				font-size: 32upx;
				border-bottom: 1px solid #F2F2F2;
				.store{
					width: 50upx;
					height: 46upx;
					vertical-align: middle;
					padding-right: 16upx;
				}
				.order-more{
					width: 35upx;
					height: 35upx;
					vertical-align: middle;
					padding: 0upx 0 5upx 5upx;
				}
				text{
					font-size: 28upx;
					color: #EF972F;
					float: right;
				}
			}
			.listTwo{
				padding: 20upx 0;
				overflow: hidden;
				.order-apple{
					width: 186upx;
					height: 193upx;
					float: left;
					padding-right: 30upx;
				}
				.sell{
					font-size: 28upx;
				}
				.unit{
					font-size: 24upx;
					line-height: 80upx;
				}
				.price{
					font-size: 30upx;
					color: #F40E0E;
					font-weight: 500;
					text{
						float: right;
						color: #999;
					}
				}
				.refund{
					color: #EF972F;
					font-size: 26upx;
					padding-top: 15upx;
				}
				.flo{
					float: right;
					padding-top: 30upx;
					.total{
						font-size: 26upx;	
						color: #999;	
						padding-left: 60upx;
						text{
							color: #F40E0E;
						}
					}
					.totals{
						font-size: 28upx;
						margin-top: 30upx;
						.delete{
							color: #F1C347;
							border: 1upx solid #F1C347;
							padding: 8upx 35upx;
							border-radius: 35upx;
							margin-right: 10upx;
							
						}
						.look{
							color: #55C47D;
							border: 1upx solid #55C47D;
							padding: 8upx 35upx;
							border-radius: 35upx;
						}
					}
				}
			}
		}
	}
}
</style>
